<template>
  <!--  印尼还款-->
  <div>
    <div style="padding: 15px">
      <el-button type="primary" v-show="permiss['/approveDetails/refundH5Link']" @click="setRepayMentValue">{{ $t('生成还款链接') }}</el-button>
    </div>
    <Table :page="false" :table-column="tableColumn" border :header-style="{backgroundColor:'#fffbed'}"
           :table-data="tableData">
      <template slot="link" slot-scope="{row}">
      <div style="display: flex">
        <div class="overflow" style="margin-right: 5px" :title="row.h5Link">{{ row.h5Link }}</div>
        <i class="el-icon-document-copy cursor_pointer" v-show="row.h5Link" style="font-size: 18px;" @click="copyLink(row.h5Link)"></i>
      </div>
      </template>
    </Table>
    <Dialog :visible.sync="visible" :confirmLoading="loading" :title="$t('生成还款链接')" @close="clearForm" @cancel="visible = false"
            @confirm="visibleConfirm">
      <el-form label-width="80px" :model="form" ref="form" :rules="rulesForm">
        <el-form-item :label="$t('订单号')">
          <div style="line-height: 32px">
            {{ $route.query.orderId }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('还款金额')" prop="repaymentAmount">
          <el-input v-model="form.repaymentAmount"></el-input>
        </el-form-item>
      </el-form>
      <el-alert
          :title="$t('还款金额不能小于') + '20000'"
          type="info"
          show-icon
          :closable="false">
      </el-alert>
    </Dialog>
  </div>
</template>

<script>
export default {
  name: "yinniRepayment",
  props: ['childPermiss','routesQuery'],
  data() {
    const validateAmount = (rule, value, callback) => {
      if (parseInt(value) < 20000) {
        return callback(new Error(this.$t('还款金额不能小于') + '20000'));
      }
      callback();
    }
    return {
      tableColumn: [
        {label: this.$t('还款链接'), slot: 'link'},
        {label: this.$t('还款金额'), prop: 'payAmount'},
        {label: this.$t('创建时间'), prop: 'creationTime'},
        {label: this.$t('操作人'), prop: 'inputName'},
      ],
      tableData: [],
      visible: false,
      permiss: {},
      form: {
        repaymentAmount: null
      },
      rulesForm: {
        repaymentAmount: [
          {required: true, message: this.$t('不能为空')},
          {required: true, validator: validateAmount}
        ]
      },
      loading:false
    }
  },
  created() {
    const obj = {}
    if (this.childPermiss && this.childPermiss.length !== 0) {
      for (let i = 0; i < this.childPermiss.length; i++) {
        obj[this.childPermiss[i].url] = this.childPermiss[i].url
      }
      this.permiss = obj
    }
    this.getList()
  },
  methods: {
    async getList() {
      const {orderId} = this.routesQuery
      const res = await this.$get('approveDetails/queryH5Link', {loanRecordId: orderId})
      if (res.code === 1 && res.data) {
        this.tableData = [{...res.data}]
      }
    },
    visibleConfirm() {
      this.$refs.form.validate(async v => {
        if (v) {
          this.loading = true
          const {orderId, userId} = this.routesQuery
          const res = await this.$post('approveDetails/refundH5Link', {
            userId: userId,
            loanRecordId: orderId,
            noAmount: parseInt(this.form.repaymentAmount)
          })
          if (res.code === 1) {
            this.visible = false
            this.loading = false
            this.$message.success(this.$t('操作成功'))
            this.getList()
          } else {
            this.loading = false
          }
        }
      })
    },
    // 拷贝链接
    copyLink(text) {
      let input = document.createElement("input");
      input.value = text
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      this.$message.success(this.$t('复制成功'))
      document.body.removeChild(input);
    },
    async setRepayMentValue() {
      const {orderId} = this.$route.query
      const res = await this.$post('approveDetails/refundH5LinkAmount', {
        loanRecordId: orderId
      })
      if (res.code === 1) {
        this.form.repaymentAmount = res.data
        this.visible = true
      }
    },
    clearForm() {
      this.form = {
        repaymentAmount: null
      }
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
